<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Nibbles in Ruby GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, Nibbles, Ruby, Linux, programming">
<meta name="description" content="In this chaper we present a Nibbles game
clone in Ruby GTK.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Nibbles</h1>

<p>
In this part of the Ruby GTK programming tutorial, we will create a Nibbles game clone.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
<b>Nibbles</b> is an older classic video game. It was first created in late 70s.
Later it was brought to PCs. In this game the player controls a snake.
The objective is to eat as many apples as possible. Each time the snake eats an apple,
its body grows. The snake must avoid the walls and its own body. 
</p>


<h2>Development</h2>

<p>
The size of each of the joints of a snake is 10px. The snake is controlled with 
the cursor keys. Initially, the snake has three joints. The game starts immediately. 
When the game is finished, we display "Game Over" message in the center of the window.
</p>

<div class="codehead">board.rb</div>
<pre class="code">
WIDTH = 300
HEIGHT = 270
DOT_SIZE = 10
ALL_DOTS = WIDTH * HEIGHT / (DOT_SIZE * DOT_SIZE)
RAND_POS = 26

$x = [0] * ALL_DOTS
$y = [0] * ALL_DOTS

class Board &lt; Gtk::DrawingArea

    def initialize
        super
            
        modify_bg Gtk::STATE_NORMAL, Gdk::Color.new(0, 0, 0)

        signal_connect "expose-event" do  
            on_expose
        end
 
        init_game
    end
    
    def on_timer

        if @inGame
            check_apple
            check_collision
            move
            queue_draw
            return true
        else
            return false
        end
    end
    
    def init_game

        @left = false
        @right = true
        @up = false
        @down = false
        @inGame = true
        @dots = 3

        for i in (0..@dots)
            $x[i] = 50 - i * 10
            $y[i] = 50
        end
        
        begin
            @dot = Cairo::ImageSurface.from_png "dot.png"
            @head = Cairo::ImageSurface.from_png "head.png"
            @apple = Cairo::ImageSurface.from_png "apple.png"
        rescue Exception => e
            puts "cannot load images"
            exit
        end

        locate_apple
        GLib::Timeout.add(100) { on_timer }

     end   
        

    def on_expose 
    
        cr = window.create_cairo_context

        if @inGame
            draw_objects cr
        else
            game_over cr
        end      
    end
    
    def draw_objects cr
    
        cr.set_source_rgb 0, 0, 0
        cr.paint

        cr.set_source @apple, @apple_x, @apple_y
        cr.paint

        for z in (0..@dots)
            if z == 0 
                cr.set_source @head, $x[z], $y[z]
                cr.paint
            else
                cr.set_source @dot, $x[z], $y[z]
                cr.paint
            end    
        end
    end

    def game_over cr

        w = allocation.width / 2
        h = allocation.height / 2

        cr.set_font_size 15
        te = cr.text_extents "Game Over"

        cr.set_source_rgb 65535, 65535, 65535
        
        cr.move_to w - te.width/2, h
        cr.show_text "Game Over"

    end


    def check_apple

        if $x[0] == @apple_x and $y[0] == @apple_y 
            @dots = @dots + 1
            locate_apple
        end
    end
    
    def move

        z = @dots

        while z > 0
            $x[z] = $x[(z - 1)]
            $y[z] = $y[(z - 1)]
            z = z - 1
        end

        if @left
            $x[0] -= DOT_SIZE
        end

        if @right 
            $x[0] += DOT_SIZE
        end

        if @up
            $y[0] -= DOT_SIZE
        end

        if @down
            $y[0] += DOT_SIZE
        end
        
     end

    def check_collision

        z = @dots
       
        while z &gt; 0
            if z &gt; 4 and $x[0] == $x[z] and $y[0] == $y[z]
                @inGame = false
            end
            z = z - 1
        end

        if $y[0] &gt; HEIGHT - DOT_SIZE
            @inGame = false
        end
        
        if $y[0] &lt; 0
            @inGame = false
        end
        
        if $x[0] &gt; WIDTH - DOT_SIZE
            @inGame = false
        end
        
        if $x[0] &lt; 0
            @inGame = false
        end    
        
    end

    def locate_apple
    
        r = rand(RAND_POS)
        @apple_x = r * DOT_SIZE
        r = rand(RAND_POS)
        @apple_y = r * DOT_SIZE
    end

    def on_key_down event
    
        key = event.keyval

        if key == Gdk::Keyval::GDK_Left and not @right
            @left = true
            @up = false
            @down = false
        end

        if key == Gdk::Keyval::GDK_Right and not @left
            @right = true
            @up = false
            @down = false
        end

        if key == Gdk::Keyval::GDK_Up and not @down
            @up = true
            @right = false
            @left = false
        end

        if key == Gdk::Keyval::GDK_Down and not @up
            @down = true
            @right = false
            @left = false
        end
    end   
end
</pre>

<p>
First we will define some globals used in our game. 
</p>

<p>
The WIDTH and HEIGHT constants determine the size of the Board. The DOT_SIZE 
is the size of the apple and the dot of the snake. The ALL_DOTS constant 
defines the maximum number of possible dots on the Board. The RAND_POS constant 
is used to calculate a random position of an apple. The DELAY constant determines 
the speed of the game.
</p>

<pre class="explanation">
$x = [0] * ALL_DOTS
$y = [0] * ALL_DOTS
</pre>

<p>
These two arrays store x, y coordinates of all possible joints of a snake. 
</p>

<p>
The <code>init_game</code> method initializes variables, loads 
images and starts a timeout function.
</p>

<pre class="explanation">
if @inGame
    draw_objects cr
else
    game_over cr
end      
</pre>

<p>
Inside the <code>on_expose</code> method, we check the <code>@inGame</code>
variable. If it is true, we draw our objects. The apple and the snake joints. Otherwise 
we display "Game over" text.  
</p>

<pre class="explanation">
def draw_objects cr

    cr.set_source_rgb 0, 0, 0
    cr.paint

    cr.set_source @apple, @apple_x, @apple_y
    cr.paint

    for z in (0..@dots)
        if z == 0 
            cr.set_source @head, $x[z], $y[z]
            cr.paint
        else
            cr.set_source @dot, $x[z], $y[z]
            cr.paint
        end    
    end
end
</pre>

<p>
The <code>draw_objects</code> method draws the apple and the joints of the
snake. The first joint of a snake is its head, which is represented by a red circle. 
</p>

<pre class="explanation">
def check_apple

    if $x[0] == @apple_x and $y[0] == @apple_y 
        @dots = @dots + 1
        locate_apple
    end
end
</pre>

<p>
The <code>check_apple</code> method checks, if the snake has hit
the apple object. If so, we add another snake joint and call the 
<code>locate_apple</code> method, which randomly places a new apple object. 
</p>

<p>
In the <code>move</code> method we have the key algorithm of the game. 
To understand it, look at how the snake is moving. You control the head of the snake. 
You can change its direction with the cursor keys. The rest of the joints move
one position up the chain. The second joint moves where the first was, 
the third joint where the second was etc. 
</p>

<pre class="explanation">
while z > 0
    $x[z] = $x[(z - 1)]
    $y[z] = $y[(z - 1)]
    z = z - 1
end
</pre>

<p>
This code moves the joints up the chain. 
</p>

<pre class="explanation">
if @left
    $x[0] -= DOT_SIZE
end
</pre>

<p>
Move the head to the left.
</p>

<p>
In the <code>check_collision</code> method, we determine if the snake
has hit itself or one of the walls. 
</p>


<pre class="explanation">
while z > 0
    if z > 4 and $x[0] == $x[z] and $y[0] == $y[z]
        @inGame = false
    end
    z = z - 1
end 
</pre>

<p>
Finish the game, if the snake hits one of its joints with the head.
</p>

<pre class="explanation">
if $y[0] > HEIGHT - DOT_SIZE
    @inGame = false
end
</pre>

<p>
Finish the game, if the snake hits the bottom of the Board. 
</p>

<p>
The <code>locate_apple</code> method locates an apple randomly 
on the board.
</p>

<pre class="explanation">
r = rand(RAND_POS)
</pre>

<p>
We get a random number from 0 to RAND_POS - 1. 
</p>

<pre class="explanation">
@apple_x = r * DOT_SIZE
...
@apple_y = r * DOT_SIZE
</pre>

<p>
These line set the x, y coordinates of the apple
object. 
</p>

<pre class="explanation">
if @inGame
    check_apple
    check_collision
    move
    queue_draw
    return true
else
    return false
end
</pre>

<p>
Every 140 ms, the <code>on_timer</code> method is called. If 
we are in the game, we call three methods, that build the logic of the game.
Otherwise we return <code>false</code>, which stops the timer event.
</p>


<p>
In the <code>on_key_down</code> method of the Board class, we 
determine the keys that were pressed.
</p>

<pre class="explanation">
if key == Gdk::Keyval::GDK_Left and not @right
    @left = true
    @up = false
    @down = false
end
</pre>

<p>
If we hit the left cursor key, we set <code>left</code> variable to 
true. This variable is used in the <code>move</code>
method to change coordinates of the snake object. Notice also, that
when the snake is heading to the right, we cannot turn immediately 
to the left. 
</p>

<div class="codehead">nibbles.rb</div>
<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This is a simple nibbles game
# clone
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'
require 'board'

class RubyApp &gt; Gtk::Window
    def initialize
        super
    
        set_title "Nibbles"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        @board = Board.new
        signal_connect "key-press-event" do |w, e|
            on_key_down(w, e)
        end
        
        add @board

        set_default_size 300, 270
        set_window_position Gtk::Window::POS_CENTER
        show_all
    end
    
    def on_key_down widget, event 
     
        key = event.keyval
        @board.on_key_down event
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
In this class, we set up the Nibbles game. 
</p>


<pre class="explanation">
def on_key_down widget, event 

    key = event.keyval
    @board.on_key_down event
end
</pre>

<p>
In this class, we catch the key press events. And delegate the processing to the
<code>on_key_down</code> method of the board class. 
</p>

<img src="/img/gui/rubygtk/nibbles.png" alt="Nibbles">
<div class="figure">Figure: Nibbles</div>

<p>
This was the Nibbles computer game programmed with the GTK library and the Ruby programming language.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 28, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

